把留言放到後台後，下一步就是要讓它顯示在前台。

這次使用到了getDocs，一次取得子集合中的所有文檔，取到資料後塞到historyComment裡面

const [historyComment, setHistoryComment]= useState([])
const docRef =  doc(db, "post", postId)

useEffect(()=>{
	const querySnapshot = getDocs(collection(docRef,"comments")).then((snapshot)=>{
	    return snapshot
	}).then((commentSnapshot)=>{
	    const commsntData = commentSnapshot.docs.map((doc) => {
	         return doc.data()
	    });
	    setHistoryComment(commsntData)
	})
},[])

接著就是去變更前台的內容

<ul className="comment_history">
    {historyComment.map((comment,index)=>{
        return(
            <li key={index}>
                <div className="user">
                    <div className="user_img">
                        <img src="" alt="" />
                    </div>
                    <div className="user_name">{comment.author.name}</div>
                </div>
                <div className="time">{new Date(comment.createdAt?.seconds* 1000).toLocaleDateString("zh-TW")}</div>
                <div className="txt">{comment.content}</div>
            </li>
        )
    })}
</ul>

做到這邊其實大致完成，在這邊想另外添加一個內容，就是留言的筆數。從起始0開始，每按下留言按鈕後就會+1。

要把這筆資料塞到post/postId裡面，新增一個參數叫做commentCount。更新資料使用到的是updateDoc的功能，寫在昨天做的onSubmit裡面。

function onSubmit(){
    //留言總數
    updateDoc(docRef,{
        commentCount : increment(1)
    })
    //留言內容
    const commentRef = collection(docRef,"comments")
    addDoc(commentRef, {
        content: comment,
        createdAt: serverTimestamp(),
            author:{
                name: auth.currentUser.email,
                uid: auth.currentUser.uid,
                photo : auth.currentUser.photoURL || ''
            },
    }).then(()=>{
        setComment("")
    });
}
return(
	<div className="total">共{post.commentCount || 0}則留言</div>
)

補充:

increment的功能是可以自動偵測數字，直接幫忙我們累加。

在這邊碰到的難題是不會使用FieldValue，查了線上的解法但都是使用過去的寫法FieldValue，後來才找到新式的寫法，直接寫increment(想要累加的數字)就可以了!!

updateDoc(docRef,{
    commentCount : firebase.firestore.FieldValue.increment(1234)
})

updateDoc(docRef,{
    commentCount : increment(1)
})